Vibe Coding for Beginner Front-End Developers

Learning: HTML vibe coding

Build your first website with AI. Use the resources on Realastic.com to complete the activities in this module.

“The AI can write the code. Your job is to learn how to direct, inspect, and modify it.”

You'll need

An AI assistant (ChatGPT, Claude, or Grok)

A browser

Visual Studio Code (recommended)

Module rule

HTML only.

No CSS. No JavaScript. No frameworks.

⏱ Estimated time: 10–100+ minutes

What you're learning

By the end of this module, you will be able to

☐ Explain what vibe coding is

☐ Write an effective AI coding prompt

☐ Explain front end vs back end

☐ Generate an HTML webpage

☐ Describe what HTML does

☐ Preview, inspect, and modify AI-generated HTML

☐ Create and connect multiple pages

☐ Reproduce the workflow independently

Completion = doing, not just reading.

💬 What is vibe coding?

Using natural-language instructions + AI to help create and modify software. You describe what you want. AI generates code. You test it. You improve it.

PROMPT→ BUILD→ TEST→ MODIFY→ REPEAT

Do — use your AI

"Explain vibe coding to me as if I've never coded before."

☐ I can explain vibe coding in my own words.

Front end vs back end

🟢 Front end — this module

What the user sees and interacts with

Text · Images · Navigation · Buttons · Layout

🔵 Back end — comes later

What happens behind the interface

Databases · Authentication · Server processing · APIs

This module: 🟢 Front end, HTML ☐ I can explain the difference.

🧱 HTML

HyperText Markup Language

HTML provides the structure and meaning of a webpage.

HTML = structure

Headings

Paragraphs

Images

Links

Lists

Sections

Navigation

"Show me a basic HTML webpage and explain the main elements." ☐ I understand what HTML does.

🔎 Find your inspiration

Before asking AI to build anything, find one website, image, or piece of HTML that inspires you.

Layout

Sections

Navigation

Images

Typography

Tone

Content

Overall impact

Don't copy it — analyse what you like about it. ☐ Inspiration selected.

✍️ Write your brief

Tell AI what you're trying to build.

What

What is the website?

Who

Who is it for?

Why

What should visitors do?

What

What sections are needed?

How

What should it feel like?

Do

Write a short website brief.

☐ My website idea is clearly described.

🤖 Your first prompt

Give your AI:

1. Your website idea

2. Your target audience

3. Your inspiration

4. Your required sections

5. Your desired tone

6. Your content requirements

Important

"You are an expert front-end software engineer. Build me a website using HTML code that [insert your description]."

"Use HTML only. Do not use CSS, JavaScript, or frameworks."

"Provide the complete HTML code."

☐ Prompt submitted

☐ HTML generated

💻 Build it

index.html

Use the HTML Visualiser to paste in your AI-generated code.

Open it in your browser.

Check

☐ Page opens

☐ Content appears

☐ Links work

☐ Images appear

☐ No obvious errors

If something doesn't work → ask AI to help fix it.

🧐 Don't just trust the AI

AI generated your code — now understand it. Use the HTML Visualiser to preview it and click around.

Ask

"Explain my HTML section by section. Don't rewrite it."

Find

Headings · Paragraphs · Links · Images · Sections

Identify at least 5 elements in your own code. ☐ I can identify 5 HTML elements.

🔧 Modify it

Now make your first change. Ask AI something specific:

"Change the main heading to [YOUR TEXT] without changing anything else."

SAVE→ REFRESH→ CHECK

Then try another change yourself.

☐ I changed the website

☐ I refreshed it

☐ I saw the change

📄 Go bigger

Create a second page and connect it with HTML links.

Home → About

Home → Products

Home → Services

Home → Contact

Ask AI to maintain

The same structure

The same navigation

The same overall design approach

Test: click every link. ☐ Page 1 works☐ Page 2 works☐ Navigation works

🔁 Reproduce: the real test

Start a new AI conversation. Don't copy your original prompt — create a new small website. You must:

☐ Describe the idea

☐ Write the prompt

☐ Generate HTML

☐ Save the file

☐ Open it

☐ Identify the HTML

☐ Modify it

☐ Test it

If you can reproduce the process, you've learned the workflow.

🏁 Final challenge

Build your own 2-page HTML-only website.

☐ 2 HTML pages

☐ Navigation between pages

☐ Headings

☐ Paragraphs

☐ At least 1 image

☐ At least 1 link

☐ 3+ sections

☐ 1+ AI-assisted modification

☐ Pages successfully tested

Explain

What is vibe coding?

What does HTML do?

What is front end? What is back end?

How did you modify your code?

🎉 Module complete

You have now:

Prompted AI→ Generated HTML→ Previewed→ Inspected→ Modified→ Connected→ Reproduced

CPD evidence — keep

📁 Your HTML files

📸 A screenshot

💬 Your original prompt

🔧 An example of a modification

Next module

🎨 Module 2 — CSS

Turn your HTML structure into a designed interface.

HTML

Structure

CSS

Presentation

JavaScript

Interaction

Back end

Functionality

Hosting

The internet

Your next step: make it look good.